<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 15:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <a-select
    v-bind="attrs"
    :value="currentValue"
    option-filter-prop="children"
    @change="selectChangeHandler"
    @search="searchHandler"
  >
    <template v-for="(item,index) in children">
      <a-select-opt-group v-if="item.children instanceof Array" :key="index">
        <span slot="label" :style="groupLabelStyle">
          <template v-if="!!item.icon">
            <a-icon :type="item.icon"/> &emsp;
          </template>
          {{ item.label }}
        </span>
        <a-select-option
          v-for="(option,optionIndex) in item.children"
          :key="index + '-' + optionIndex"
          v-bind="option"
        >
          {{ option.label }}
        </a-select-option>
      </a-select-opt-group>

      <a-select-option
        v-else
        :key="index"
        v-bind="item"
      >
        {{ item.label }}
      </a-select-option>
    </template>

<!--    <extend-slot v-for="(render, key) of slots" v-slot:[key] :key="key" :data="slotData" :render="render"/>-->
  </a-select>
</template>

<script>
import {COMPONENT_TYPE, CUSTOM_EVENT_TYPE} from '../../constants'
import ComponentMixin from '../../XRenderMixins/XRenderComponentMixin'

export default {
  name: 'AntFormBaseSelect',
  mixins: [ComponentMixin],
  props: {
    value: {
      type: [String, Number, Array]
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    componentType: {
      type: String,
      default: COMPONENT_TYPE.SELECT
    }
  },
  computed: {
    groupLabelStyle: {
      get() {
        const {attrs} = this
        const {groupLabelStyle} = attrs
        if (!!groupLabelStyle && typeof (groupLabelStyle) === 'object') {
          return groupLabelStyle
        }
        if (!!groupLabelStyle && typeof (groupLabelStyle) === 'string') {
          return (new Function('return ' + groupLabelStyle))()
        }
        return {
          'fontSize': '14px'
        }
      }
    },
    currentValue: {
      get() {
        const {value, formItem, isDebug} = this
        if (this.multiple) {
          if (!(value instanceof Array) && typeof (value) !== 'string') {
            isDebug ? console.warn(`${formItem.prop} value类型错误,非String或Array`) : ''
            return []
          }
          if (value instanceof Array) {
            return value
          }

          return value.split(',') || []
        }
        return value || []
      }
    },
    children: {
      get() {
        const {attrs, formItem, isDebug} = this
        const children = attrs.children
        if (typeof (children) !== 'string' && !(children instanceof Array)) {
          isDebug ? console.warn(`${formItem.prop} children类型错误,非String或Array`) : ''
          return []
        }
        if (children instanceof Array) {
          return children || []
        }
        return (new Function('return ' + children))()
      }
    },
    multiple: {
      get() {
        const {attrs, isMultiple} = this
        const {mode} = attrs
        return ['multiple', 'tags', 'combobox'].includes(mode) && isMultiple
      }
    },
    // 分词
    tokenSeparators: {
      get() {
        const {attrs, multiple, isDebug, formItem} = this
        if (multiple) {
          const {tokenSeparators} = attrs
          if (typeof (tokenSeparators) !== 'string' && !(tokenSeparators instanceof Array)) {
            isDebug ? console.warn(`${this.formItem.prop} tokenSeparators类型错误,非String或Array`) : ''
            return [',', '，']
          }
          if (tokenSeparators instanceof Array) {
            return tokenSeparators || [',', '，']
          }
          return (new Function('return ' + tokenSeparators))()
        }
        return [',', '，']
      }
    }
  },
  methods: {
    searchHandler(value) {
      const {componentType, formItem, attrs} = this
      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: CUSTOM_EVENT_TYPE.SEARCH_EVENT,
        compType: componentType,
        prop: formItem ? formItem.prop : '',
        value,
        attrs: attrs,
        formItem: formItem
      })
    },
    selectChangeHandler(value, option) {
      const {isDebug, formItem, attrs, children, componentType} = this
      // 为关联的键进行赋值
      // select的option
      const obj = {}
      let {associations} = attrs

      if (typeof (associations) !== 'string' && !(associations instanceof Array)) {
        isDebug ? console.warn(`${formItem.prop} associations类型错误,非String或Array`) : ''
        associations = []
      }
      if (typeof (associations) === 'string') {
        associations = (new Function('return ' + associations))()
      }
      if (associations instanceof Array) {
        associations = associations || []
      }

      // 关联的key
      for (const child of children) {
        if (child.value === value) {
          for (const association of associations) {
            if (!!association.key && !!association.mapKey) {
              obj[association.key] = child[association.mapKey]
            }
          }
        }
      }

      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: CUSTOM_EVENT_TYPE.ASSOCIATION_CHANGE_EVENT,
        compType: componentType,
        prop: formItem ? formItem.prop : '',
        value: obj,
        attrs,
        formItem,
        option
      })

      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: componentType,
        prop: formItem ? formItem.prop : '',
        value,
        attrs,
        formItem,
        association: obj,
        option
      })
    }
  }
}
</script>
